<template>
	<view class="change-password-view">
		<u--form labelPosition="left" ref="ruleForm" labelWidth="270rpx" :model="ruleForm" :rules="rules">
			<view class="content-view">
				<u-form-item label="旧密码" prop="currentPwd">
					<u--input placeholder="请输入旧密码" border="none" inputAlign="right" v-model="ruleForm.currentPwd" suffixIcon="arrow-right">
					</u--input>
				</u-form-item>

				<u-form-item label="新密码" prop="newPwd">
					<u--input type="password" placeholder="请输入新密码" border="none" inputAlign="right" v-model="ruleForm.newPwd"
						suffixIcon="arrow-right">
					</u--input>
				</u-form-item>

				<u-form-item label="确认密码" prop="aginNewPwd">
					<u--input type="password" placeholder="请再次输入新密码" border="none" inputAlign="right" v-model="ruleForm.aginNewPwd"
						suffixIcon="arrow-right">
					</u--input>
				</u-form-item>
			</view>
		</u--form>
		<view class="password-desc">
			密码需要8位以上,并且包含数字、大小写字母和特殊字符。
		</view>
		<view class="btn-view">
			<view class="login-btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入当前密码'));
				} else {
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入新密码'));
				} else {
					callback();
				}
			};
			var validatePass3 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入新密码'));
				} else if (value !== this.ruleForm.newPwd) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					// 当前密码
					currentPwd: '',
					// 新密码
					newPwd: '',
					// 确认密码
					aginNewPwd: '',
				},
				rules: {
					currentPwd: [{
						validator: validatePass,
						trigger: ['change', 'blur']
					}],
					newPwd: [{
						validator: validatePass2,
						trigger: ['change', 'blur']
					}],
					aginNewPwd: [{
						validator: validatePass3,
						trigger: ['change', 'blur']
					}],
				}
			}
		},
		methods: {
			submit() {
				let that = this
				let params = {
					currentPwd: that.ruleForm.currentPwd,
					newPwd: that.ruleForm.newPwd
				}
				this.$refs.ruleForm.validate().then(res => {
					that.request(that.$api.updatePwd, params, 'PUT').then((res) => {
						if (res.code == 200) {
							uni.$u.toast(res.resultValue)
							setTimeout(() => {
								uni.navigateTo({
									url: '../../pages/login/login'
								})
								// 清空表单
								that.reset()
							}, 1000)
						} else {
							uni.$u.toast(res.resultValue)
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			reset() {
				this.ruleForm = {
					// 当前密码
					currentPwd: '',
					// 新密码
					newPwd: '',
					// 确认密码
					aginNewPwd: ''
				}
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.ruleForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.change-password-view {
		height: 100vh;
		background: #F1F2F5;
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.content-view {
		padding: 0 40rpx;
		background: white;
	}

	.password-desc {
		font-size: 28rpx;
		color: #999;
		padding: 28rpx 40rpx 0;
	}

	.btn-view {
		padding: 120rpx 40rpx 0;
	}

	.btn-view .btn {
		height: 96rpx;
		border-radius: 8rpx;
	}

	.login-btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #2878FF;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		border-radius: 20rpx;
	}

	>>>.uni-input-input {
		text-align: right !important;
	}

	>>>.input-placeholder {
		text-align: right !important;
	}

	>>>.u-form-item__body {
		height: 100rpx;
		box-sizing: border-box;
	}

	>>>.u-form-item__body__right__message {
		text-align: right !important;
		margin: 0 40rpx 10rpx 0;
	}

	>>>.u-form-item {
		border-bottom: 2rpx solid #EFEFEF;
	}

	>>>.u-form-item:last-child {
		border-bottom: none;
	}
</style>
